<template>
    <div class="login">
        <div class="login-title">在线考试系统客户端</div>

        <div class="login-main">
            <div class="left"></div>
            <div class="right">
                <div class="right-title">请登录</div>
                <div class="form">
                    <div class="form-item">
                        <el-input
                            v-model="account"
                            placeholder="请输入您的姓名"
                            :autofocus="true"
                        />
                    </div>
                    <div class="form-item">
                        <el-input
                            type="password"
                            v-model="password"
                            placeholder="请输入您的密码"
                            :show-password="true"
                        />
                    </div>
                    <!-- <div class="captcha">
                        <div class="captcha-input">
                            <img class="captcha-img" :src="captchaUrl" alt="" />
                            <el-input class="" v-model="captchaVal"></el-input>
                        </div>
                    </div> -->
                    <div class="forget-pwd">忘记密码？</div>
                    <el-button class="login-btn" type="primary" @click="handleLogin">
                        开始考试
                    </el-button>
                </div>
            </div>
        </div>

        <div class="danger" v-if="showPwdError">
            <div class="danger-icon"></div>
            <div class="danger-text">密码不对！请检查账号密码是否有误，并重新登陆。</div>
        </div>

        <div class="warn">
            <div class="warn-icon"></div>
            <div class="warn-text">
                1、若答题过程中异常退出，使用相同考号重新登录继续考试。
                <br />
                2、考试过程中禁止切屏。
            </div>
        </div>
    </div>
</template>

<script setup>
import { v4 as uuidV4 } from 'uuid'
import { login } from '@/api/login'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserinfoStore } from '@/stores/user'
const router = useRouter()

let account = ref('')
let password = ref('')
let captchaUrl = ref('')
let showPwdError = ref(false)

let uuid = ref('')

const userStore = useUserinfoStore()
changeCaptcha()
// 重新生成验证码
function changeCaptcha() {
    uuid.value = uuidV4()
    captchaUrl.value = '/exam-client/captcha.jpg?uuid=' + uuid.value + new Date().getTime()
}

async function handleLogin() {
    let res = await login({ username: account.value, password: password.value })
    if (res.data.code === 0) {
        let token = res.data.token
        userStore.setUserinfo(res.data.user)
        sessionStorage.setItem('user', JSON.stringify(res.data.user))
        sessionStorage.setItem('token', token)
        ElMessage.success('登录成功')
        router.push('list')
    } else {
        showPwdError.value = true
    }
}
</script>

<style lang="less" scoped>
.login {
    height: 100%;
    .bg('login-bg');
    &-title {
        padding-top: 110px;
        font-weight: 700;
        font-size: 54px;
        color: #fff;
        letter-spacing: 9px;
        text-align: center;
    }
    &-main {
        margin: 50px auto 10px auto;
        width: 900px;
        height: 450px;
        background-color: #fff;
        border-radius: 15px;
        display: flex;
        .left {
            width: 327px;
            .bg('login-logo');
            border-radius: 15px 0 0 15px;
        }
        .right {
            padding: 44px 50px;
            width: 573px;
            &-title {
                margin-bottom: 32px;
                font-size: 32px;
            }
            .form {
                width: 470px;
                line-height: 20px;
                &-item {
                    margin-bottom: 25px;
                    height: 55px;
                    display: flex;
                    font-size: 32px;
                }
            }
            .forget-pwd {
                text-align: right;
                font-size: 15px;
                color: #0072e8;
                cursor: pointer;
            }
            .login-btn {
                margin-top: 30px;
                width: 470px;
                height: 60px;
                padding: 15px 0;
                color: #fff;
                font-size: 22px;
            }
        }
    }
    .warn {
        display: flex;
        align-items: center;
        margin: 10px auto;
        padding: 24px 150px;
        width: 900px;
        background-color: #ffbe2f;
        border-radius: 10px;
        box-sizing: border-box;
        color: #fff;
        font-size: 18px;
        &-icon {
            margin-right: 50px;
            width: 35px;
            height: 35px;
            .bg('login-warn');
        }
    }

    .danger {
        display: flex;
        align-items: center;
        margin: 10px auto;
        padding: 16px 150px;
        width: 900px;
        background-color: #f92f2b;
        border-radius: 10px;
        box-sizing: border-box;
        color: #fff;
        font-size: 18px;
        &-icon {
            margin-right: 50px;
            width: 35px;
            height: 35px;
            .bg('login-danger');
        }
    }
}
</style>
